<template>
  <div class="book-management-container">
    <!-- 添加按钮 -->
    <el-button type="primary" @click="showAddDialog">添加书籍</el-button>

    <!-- 书籍信息表格 -->
    <el-table border :data="bookData" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="id" label="书籍ID" width="80"></el-table-column>
      <el-table-column prop="bookname" label="书籍名称"></el-table-column>
      <el-table-column prop="author_id" label="作者id">
          
      </el-table-column>
      <el-table-column prop="bookstate" label="书籍状态">
        <template #default="{row}">
          <el-tag v-if="row.book_state == 0" type="success">正常</el-tag>
          <el-tag v-else-if="row.book_state == 1" type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加对话框 -->
    <el-dialog title="添加书籍信息" v-model="addDialogVisible">
      <el-form :model="addForm" label-width="120px">
        <el-form-item label="书籍名称">
          <el-input v-model="addForm.bookname"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-select v-model="addForm.authorid" placeholder="请选择作者">
            <el-option
              v-for="author in authorData"
              :key="author.id"
              :label="author.username"
              :value="author.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="书籍状态">
          <el-select v-model="addForm.bookstate" placeholder="请选择状态">
            <el-option label="正常" :value="0"></el-option>
            <el-option label="禁用" :value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAdd">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog title="编辑书籍信息" v-model="editDialogVisible">
      <el-form :model="editForm" label-width="120px">
        <el-form-item label="书籍名称">
          <el-input v-model="editForm.bookname"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-select v-model="editForm.authorid" placeholder="请选择作者">
            <el-option
              v-for="author in authorData"
              :key="author.id"
              :label="author.username"
              :value="author.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="书籍状态">
          <el-select v-model="editForm.bookstate" placeholder="请选择状态">
            <el-option label="正常" :value="0"></el-option>
            <el-option label="禁用" :value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitEdit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import axios from 'axios';

const bookData = ref([]);
const authorData = ref([]);
const addDialogVisible = ref(false);
const editDialogVisible = ref(false);
const addForm = ref({
  bookname: '',
  authorid: '',
  bookstate: ''
});
const editForm = ref({
  id: '',
  bookname: '',
  authorid: '',
  bookstate: ''
});

onMounted(() => {
  getBookList();
  getAuthorList();
});

const getBookList = () => {
  axios({
    url: '/api/admin/authorBook/getAll',
    method: 'POST',
  })
  .then(res => {
    bookData.value = res.data.data;
  })
  .catch(err => {
    ElMessage.error('获取书籍列表失败');
  });
};

const getAuthorList = () => {
  axios({
    url: '/api/admin/authorBook/author',
    method: 'POST',
  })
  .then(res => {
    authorData.value = res.data.data;
  })
  .catch(err => {
    ElMessage.error('获取作者列表失败');
  });
};

const showAddDialog = () => {
  addDialogVisible.value = true;
  addForm.value = {
    bookname: '',
    authorid: '',
    bookstate: ''
  };
};

const submitAdd = () => {
  axios({
    url: '/api/admin/authorBook/add',
    method: 'POST',
    params: {
      bookname: addForm.value.bookname,
      author_id: addForm.value.authorid,
      book_state: addForm.value.bookstate
    }
  })
  .then(res => {
    ElMessage.success('添加成功');
    getBookList();
    addDialogVisible.value = false;
  })
  .catch(err => {
    ElMessage.error('添加失败');
  });
};

const handleEdit = (row) => {
  editForm.value = { ...row };
  editDialogVisible.value = true;
};

const submitEdit = () => {
  axios({
    url: '/api/admin/authorBook/update',
    method: 'POST',
    params: {
      id: editForm.value.id,
      bookname: editForm.value.bookname,
      author_id: editForm.value.authorid,
      book_state: editForm.value.bookstate
    }
  })
  .then(res => {
    ElMessage.success('修改成功');
    getBookList();
    editDialogVisible.value = false;
  })
  .catch(err => {
    ElMessage.error('修改失败');
  });
};

const handleDelete = (row) => {
  ElMessageBox.confirm('此操作将永久删除该书籍, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  .then(() => {
    axios({
      url: '/api/admin/authorBook/delete',
      method: 'POST',
      params: {
        id: row.id
      }
    })
    .then(res => {
      ElMessage.success('删除成功');
      getBookList();
    })
    .catch(err => {
      ElMessage.error('删除失败');
    });
  })
  .catch(() => {
    ElMessage.info('已取消删除');
  });
};
</script>
<style scoped>
.book-management-container {
  padding: 20px;
}

.query-form {
  margin-bottom: 20px;
}

h1 {
  color: #42b883;
}
</style>